import { Layout, Row, Col, Flex, Button } from "antd";
import { BoldOutlined } from "@ant-design/icons";
import SiderMenu, { parseMenuItemKey } from "./SiderMenu";
import React, { useEffect, useRef, useState } from "react";
import UserContext from "./userlist/UserContext";
import { MenuItemKey } from "./SiderMenu";
import Welcome from "./welcome/Welcome";

// <BoldOutlined />
const { Header, Footer, Sider, Content } = Layout;

const headerStyle: React.CSSProperties = {
  textAlign: "center",
  color: "white",
  height: 64,
  paddingInline: 48,
  lineHeight: "64px",
  backgroundColor: "black",
};

const contentStyle: React.CSSProperties = {
  textAlign: "center",
  minHeight: 120,
  lineHeight: "120px",
  color: "#fff",
  backgroundColor: "#F0F2F5",
  flex: 1,
};

const siderStyle: React.CSSProperties = {
  textAlign: "center",
  lineHeight: "120px",
  color: "#fff",
  backgroundColor: "#1677ff",
  display: "flex",
  height: "100%",
  width: "auto",
  maxWidth: "100%",
  flex: "0.0 auto",
};

const footerStyle: React.CSSProperties = {
  textAlign: "center",
  color: "#fff",
  backgroundColor: "#4096ff",
};

const layoutStyle = {
  borderRadius: 8,
  overflow: "hidden",
  width: "calc(100% - 8px)",
  maxWidth: "calc(100% - 8px)",
};

const navigationButtonStyle: React.CSSProperties = {
  backgroundColor: "inherit",
  color: "white",
  border: "none",
};

const App: React.FC = () => {
  const [selectedItem, setSelectedItem] = useState(MenuItemKey.welcome)
  const handleMenuClick = (e: string) => {
    console.log("Menu clicked in parent component: ", e);
    setSelectedItem(parseMenuItemKey(e))
    // 处理点击事件
  };

  return (
    <Layout style={{ ...layoutStyle, height: "100vh" }}>
      <Header style={headerStyle}>
        <div
          style={{
            listStyle: "none",
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between",
            gap: "30px",
            margin: 0,
            height: "100%",
          }}
        >
          <Button icon={<BoldOutlined />} style={navigationButtonStyle}>
            fitch
          </Button>
          <Button style={{ marginLeft: "auto", border: "none" }}>login</Button>
        </div>
      </Header>
      <Layout
        style={{
          display: "flex",
          flexDirection: "row",
        }}
      >
        <SiderMenu onClick={handleMenuClick}></SiderMenu>
        <Content style={contentStyle}>

          {(() => {
            switch (selectedItem) {
              case MenuItemKey.welcome:
                return <Welcome></Welcome>
              case MenuItemKey.userList:
                return <UserContext></UserContext>
              default:
                return null
            }
          })()

          }

        </Content>
      </Layout>
      <Footer style={footerStyle}>Footer</Footer>
    </Layout>
  );
};

export default App;
